@import './vw';
@import './common1';

.content{
    z-index: 0;
    // padding: vw(90) 0 vw(96) 0;
    // margin-bottom: vw(96);
    padding:  vw(90) 0 0 0;
    height: 100vh;
    overflow-y: scroll;

    &::after{
        content: "";
        display: block;
        height: vw(96);
        visibility: hidden; /* 设置元素的可见性 hidden代表元素不可见 虽然元素不可见 但是在文档中的位置还占据着位置 */
    }
    // background-color: yellow;
    .whitebg{
        height: vw(8);
    }
    
    .banner{
        position: relative;
        >img{
            width: vw(640);
            height: vw(321);
        }
        .mask{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: vw(105);
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            background-color: rgba(0,0,0,.6);
            p:nth-child(1){
                width: vw(182);
                background-color: red;
                
            }
            p:nth-child(2){
                width: vw(410);
            }
            p{
                font-size: vw(27);
                height: vw(40);
                line-height: vw(40);
                text-align: center;
                margin-left: vw(2);
                margin-top: vw(13);
                color: white;
            }
        }
        // .radio{
        //     height: vw(46);
        //     display: flex;
        //     justify-content: center;
        //     align-items: center;
        //     img{
        //         width: vw(75);
        //         height: vw(10);
        //     }
        // }
    }

    .wrapper{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        .rowbox{
            margin: vw(20) auto 0;
            padding-bottom: vw(12);
            box-sizing: border-box;
            width: vw(585);
            // height: vw(338);
            display: flex;
            justify-content: space-between;
            .box{
                width: vw(284);
                height: vw(330);
                background-color: #f6f6f6;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                padding-bottom: vw(6);
                >img{
                    width: 100%;
                    height: vw(182);
                    margin-right: vw(6);
                }
                    
                p{
                    width: 100%;
                    height: vw(50);
                    font-size: vw(21);
                    padding-left: vw(4);
                    // box-sizing: border-box;
                }
                
                .sell{
                    width: 94%;
                    margin: 0 auto;
                    height: vw(28);
                    display: flex;
                    justify-content: space-between;
                    button{
                        width: vw(88);
                        height: vw(27);
                        line-height: vw(27);
                        color: white;
                        background-color: #b20000;
                        font-size: vw(18);
                        text-align: center;
                        display: block;
                        border-radius: vw(4);
                        border: none;
                        letter-spacing: vw(3);
                    }
                    span{
                        font-size: vw(20);
                        text-align: center;
                        color: #c5c5c5;
                    }
                    img{
                        margin-right: vw(7);
                    }
                    span:nth-of-type(1){
                        width: vw(63);
                        display: flex;
                        align-items: flex-end;
                        margin-bottom: vw(3);
                        margin-left: vw(33);
                        img{
                            width: vw(21);
                            height: vw(20);
                        }
                    }
                    span:nth-of-type(2){
                        width: vw(67);
                        display: flex;
                        align-items: center;
                        img{
                            width: vw(24);
                            height: vw(14);
                        }
                    }
                }
                .time{
                    span{
                        font-size: vw(18);
                        color: #c5c5c5;
                        // margin-bottom: vw(12);
                    }
                    img{
                        width: vw(35);
                        height: vw(35);
                        margin-bottom: vw(-6);
                        margin-left: vw(7);
                    }
                    span:nth-of-type(1){
                        margin: 0 vw(13) 0 vw(7);
                    }
                }
            }   
        }
    }
    
    .bottom{
        width: vw(585);
        height: vw(75);
        margin: 0 auto;
        text-align: center;
        line-height: vw(60);
        color: #bbbbbb;
        border-top: 1px solid #e6e6e6;
        margin-top: vw(31);
    }   
}
